<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>问答管理</el-breadcrumb-item>
        <el-breadcrumb-item>问答列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row :gutter="24">
              <el-col :span="3">
                  <el-input size="small" clearable placeholder="问题Id" v-model="queryParams.id" /> 
              </el-col>
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="手机号码" v-model="queryParams.phone" /> 
              </el-col>
              <el-col :span="5">
                  <el-input size="small" clearable placeholder="用户名" v-model="queryParams.username" /> 
              </el-col>
              <el-col :span="4"><!--getUserListByGroupName-->
                <template>
                <el-select v-model="queryParams.handle" filterable clearable placeholder="状态" size="small">
                    <el-option
                    v-for="item in handleList"
                    :key="item.id"
                    :label="item.value"
                    :value="item.desc">
                    </el-option>
                </el-select>
                </template>
             </el-col>
             <el-col :span="5" >
                  <el-button size="small" type="success" @click="getList" icon="el-icon-search" v-if="permissionStrValue.indexOf('question:query') !== -1">查询</el-button>
              </el-col>
          </el-row>
      <el-table :data="list" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="问题id" prop="id"></el-table-column>
        <el-table-column label="提问人" prop="username"></el-table-column>
        <el-table-column label="联系电话" prop="phone"></el-table-column>
        <el-table-column label="问题描述" prop="desc"></el-table-column>
        <el-table-column label="是否处理" >
             <template slot-scope="scope">
                    <span style="color:#67C23A" size="medium">{{ scope.row.handle === 0 ? '未处理' : '已处理'}}</span>
                </template>
        </el-table-column>
        <el-table-column label="提问时间" prop="createTime"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" v-if="permissionStrValue.indexOf('question:update') !== -1">
            <el-tooltip class="item" effect="dark" content="回复" placement="top" v-if="scope.row.handle === 0">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="replayQuestion(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="回复" placement="top" v-if="scope.row.handle === 1">
              <el-button
                disabled
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="replayQuestion(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.currPage"
        :page-sizes="[1, 5, 10, 15]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <el-dialog title="回复" :visible.sync="replayVisible" width="30%">
      <el-form :model="replay" ref="replayFormRef" label-width="100px" class="demo-ruleForm" :rules="replayRule">
        <el-form-item label="回复内容" prop="content">
          <el-input v-model="replay.content" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetReplay">取 消</el-button>
        <el-button type="primary" @click="submitReplay">确 定</el-button>
      </span>
    </el-dialog>

    </div>
    
</template>
<script>
export default {
    name: 'Question',
    data() {
        return {
            list: [],
            total: 0,
            permissionStrValue: '',
            replay: {
                content: '',
                id: ''

            },
            queryParams: {
                id: '',
                phone: '',
                handle: '',
                currPage: 1,
                pageSize: 10,
                username: '',


            },
            handleList: [
                {
                    id: 0,
                    value: '未处理',
                    desc: 0,
                },
                {
                    id: 1,
                    value: '已处理',
                    desc: 1
                }

            ],
            replayVisible: false,
            replayRule: {
                content: [
                    { required: true, message: '回复的内容不能为空', trigger: 'blur' }
               ],
                
            },
            

            
        }
    },
    created() {
        this.getList()
        //获取权限值
       this.permissionStrValue = JSON.parse(window.sessionStorage.getItem('permissionList')).toString();

    },
    methods: {

        async submitReplay() {
            if(this.replay.content === '') {
                return this.$message.error("回复的内容不能为空！")
            }
            var user = JSON.parse(window.sessionStorage.getItem('user'));
            console.log(user)
            let userId = user.id;
            let qid = this.replay.id
            let content = this.replay.content;
            
            const {data: res} = await this.$http.put(`/user/questions/update-status/${qid}/${userId}/${content}`)
            if(!res.success) {
                return this.$message.error("网络出错！")
            }
            this.init();
            this.replayVisible = false;
            this.getList();
            

        },

        replayQuestion(obj) {
            this.replay.id = obj.id;
            this.replayVisible = true
        },

        async getList() {
            const{data: res} = await this.$http.post('/user/questions/list-page', JSON.stringify(this.queryParams), {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',
                }
            })
            console.log(res)
            if(!res.success) {
                return this.$message.error(res.message)
            }
            this.list = res.data;
            this.total = res.total;

        },

        init() {
            this.queryParams.phone='';
            this.queryParams.handle = '',
            this.queryParams.currPage = 1;
            this.queryParams.pageSize = 10;
            this.queryParams.username = '';
        },

        resetReplay() {
            this.replay.content = '';
            this.replayVisible = false;
        },


        /* 分页功能 */
        handleSizeChange(newSize) {
            this.queryParams.pageSize = newSize;
            this.getList();
        },
        handleCurrentChange(newPageNum) {
        this.queryParams.currPage = newPageNum;
        this.getList();
        },

        },
       
        
}
</script>